<template>
  <el-main style="padding: 0px 20px">
    <div style="margin:20px 0px">
      <el-button icon="el-icon-plus" v-if="hasPerm('sys:menu:add')" type="success" size="medium" @click="addMenu">新增</el-button>
    </div>
    <el-table
      :height="tableHeight"
      :data="menuList"
      border
      stripe
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="label" label="名称"></el-table-column>
      <el-table-column width="120" prop="type" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag size="normal" v-if="scope.row.type == '0'">目录</el-tag>
          <el-tag size="normal" type="success" v-if="scope.row.type == '1'">菜单</el-tag>
          <el-tag size="normal" type="danger" v-if="scope.row.type == '2'">功能</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="icon" align="center" label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="name" align="center" label="路由名称"></el-table-column>
      <el-table-column show-overflow-tooltip prop="path" align="center" label="路由地址"></el-table-column>
      <el-table-column show-overflow-tooltip prop="component" align="center" label="组件路径"></el-table-column>
      <el-table-column show-overflow-tooltip prop="perms" align="center" label="权限字段"></el-table-column>
      <el-table-column width="120" prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="editMenuStatus(scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button v-if="hasPerm('sys:menu:edit')" type="primary" icon="el-icon-edit" size="small" @click="editMenu(scope.row)">编辑</el-button>
          <el-button v-if="hasPerm('sys:menu:delete')" type="danger" icon="el-icon-delete" size="small" @click="deleteMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或编辑弹框 -->
    <my-dialog
      :title="menuDialog.title"
      :width="menuDialog.width"
      :height="menuDialog.height"
      :visible="menuDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="menuFormData"
          ref="menuFormRef"
          :rules="rules"
          label-width="96px"
          :inline="true"
          size="small"
        >

          <el-form-item size="small" label="父级类型">
            <el-cascader
              clearable
              filterable
              placeholder="点击选择或输入搜索父级类型(不选择默认新增目录类型)"
              @change="selectType"
              v-model="menuFormData.pid"
              :options="parentMenuList"
              :props="cascaderProps"
              style="min-width: 458px;"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item prop="label" size="small" label="功能名称">
            <el-input v-model="menuFormData.label"></el-input>
          </el-form-item>

          <el-form-item prop="name" size="small" label="路由名称">
            <el-input v-model="menuFormData.name"></el-input>
          </el-form-item>

          <el-form-item prop="path" v-if="menuFormData.type != '2'" size="small">
            <span slot="label">
              <el-tooltip content="如：/content/menu/button" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>路由地址
            </span>
            <el-input v-model="menuFormData.path"></el-input>
          </el-form-item>

          <el-form-item prop="component" v-if="menuFormData.type == '1'" size="small">
            <span slot="label">
              <el-tooltip content="如：/Content/Menu/Button" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>组件路径
            </span>
            <el-input v-model="menuFormData.component"></el-input>
          </el-form-item>

          <el-form-item prop="perms" size="small">
            <span slot="label">
              <el-tooltip content="如：content:menu:button" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>权限字段
            </span>
            <el-input v-model="menuFormData.perms"></el-input>
          </el-form-item>

          <el-form-item v-if="menuFormData.type != '2'" size="small" label="菜单图标" >
            <my-iconSelect @selecticon="setIcon" ref="iconselect" />
          </el-form-item>

          <el-form-item prop="sort" size="small" label="菜单序号">
            <el-input-number
              controls-position="right"
              v-model.number="deptFormData.sort"
              :min="0"
              v-model="menuFormData.sort"
            ></el-input-number>
          </el-form-item>

        </el-form>
      </div>
    </my-dialog>
  </el-main>
</template>

<script>
import {
  getMenuListApi,
  getParentTreeApi,
  addMenuApi,
  editMenuStatusApi,
  editMenuApi,
  deleteMenuApi,
} from "@/api/menu";
import myDialog from "@/components/MyDialog/index";
import myIconSelect from "@/components/MyIconSelect/index";
export default {
  components: { myDialog, myIconSelect },
  data() {
    return {
      cascaderProps:{
        checkStrictly: true,
        // emitPath: false,
        expandTrigger:'hover'
      },
      //新增或编辑表单验证规则
      rules: {
        label: { required: true, trigger: "blur", message: "请填写功能名称" },
        name: { required: true, trigger: "blur", message: "请填写路由名称" },
        path: { required: true, trigger: "blur", message: "请填写路由路径" },
        component: { required: true, trigger: "blur", message: "请填写组件路径" },
        perms: { required: true, trigger: "blur", message: "请填写权限字段" },
        sort: { type: "number", trigger: "blur", message: "请输入合法数字" }
      },
      //true：编辑 flase :新增
      actionType: "",
      //新增或编辑表单数据域
      menuFormData: {
        id: "",
        pid: "",
        label: "",
        type: "",
        icon: "",
        name: "",
        path: "",
        component: "",
        perms: "",
        status: "",
        sort: "",
        version:"",
      },
      //新增或编辑弹框属性
      menuDialog: {
        title: "",
        width: 630,
        height: 260,
        visible: false,
      },
      //表格高度
      tableHeight: 0,
      //菜单数量列表
      menuList: [],
      parentMenuList: [],
    };
  },
  created() {
    this.getMenuList();
    this.getParentMenuList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 170;
    })
  },
  methods: {
    setIcon(icon) {
      this.menuFormData.icon = icon;
    },
    //修改状态
    async editMenuStatus(value){
        let res = await editMenuStatusApi(value);
        if (res && res.code == 200) {
          //刷新列表
          this.getMenuList();
          this.$message.success(res.msg);
        }
    },
    //根据父节点决定类型
    selectType(){
      if(this.menuFormData.pid){
        switch(this.menuFormData.pid.length){
          case 0:
            this.menuFormData.type=0
          break;
          case 1:
            this.menuFormData.type=1
          break;
          case 2:
            this.menuFormData.type=2
          break;
          default:
            this.menuFormData.type=0
          break;
        }
      }
    },
    //新增或编辑确认
    onConfirm() {
      this.$refs.menuFormRef.validate(async (valid) => {
        if (valid) {
          let tmp = "";
          switch(this.menuFormData.type){
            case 0:
              this.menuFormData.pid=0
            break;
            case 1:
              tmp = this.menuFormData.pid[0]
              this.menuFormData.pid = tmp
            break;
            case 2:
              tmp = this.menuFormData.pid[1]
              this.menuFormData.pid = tmp
            break;
            default:
              this.menuFormData.pid=0
            break;
          }
          let res = null;
          if (this.actionType) {
            //编辑
            res = await editMenuApi(this.menuFormData);
          } else {
            //新增
            res = await addMenuApi(this.menuFormData);
          }
          if (res && res.code == 200) {
            //刷新列表
            this.getMenuList();
            this.getParentMenuList();
            this.menuDialog.visible = false;
            this.$message.success(res.msg);
          }
        }
      });
    },
    //新增或编辑取消
    onClose() {
      this.menuDialog.visible = false;
    },
    //新增功能
    addMenu() {
      this.$resetForm("menuFormRef", this.menuFormData);
      this.menuDialog.title = "新增功能";
      this.menuDialog.visible = true;
      this.actionType = false;
      this.$resetForm("menuFormRef", this.menuFormData);
      this.$nextTick(() => {
        this.$refs.iconselect.whichIcon='';
      })

    },
    //编辑功能
    editMenu(row) {
      this.$resetForm("menuFormRef", this.menuFormData);
      //把当前要编辑的数据复制到数据域，给表单回显
      this.$objCoppy(row, this.menuFormData);
      //设置编辑的标识
      this.actionType = true;
      //设置弹框属性
      this.menuDialog.title = "编辑功能";
      this.menuDialog.visible = true;
      if(row.type!==2){
        this.$nextTick(() => {
          this.$refs.iconselect.whichIcon=row.icon;
        })
      }
    },
    //删除功能
    async deleteMenu(row) {
      let type;
      switch (row.type) {
        case 0:
          type = "目录"
        break;
        case 1:
          type = "菜单"
        break;
        case 2:
          type = "功能"
        break;
        default:
          type = "目录"
        break;
      }
      let warning = "确定删除该"+type+"吗？"
      if(row.children.length > 0 ) {
        if(row.type==0){
          warning = "该目录下包含菜单，确定删除吗？"
        }else if (row.type==1){
          warning = "该菜单下包含功能，确定删除吗？"
        }
      }
      let confirm = await this.$myconfirm(warning);
      if (confirm) {
        let parm = {
          id: row.id
        };
        let res = await deleteMenuApi(parm);
        if (res && res.code == 200) {
          //刷新列表
          this.getMenuList();
          this.getParentMenuList();
          this.$message.success(res.msg);
        }
      }
    },
    //获取菜单列表
    async getMenuList() {
      let res = await getMenuListApi();
      if (res && res.code == 200) {
        this.menuList = res.data;
      }
    },
    //获取父级菜单
    async getParentMenuList() {
      let res = await getParentTreeApi();
      if (res && res.code == 200) {
        this.parentMenuList = res.data;
      }
    }
  }
};
</script>
